.plan-task-config-hide {
  position: absolute;
  top: 18px;
  left: 0;
  padding: 5px 3px;
  background: var(--theme-10);
  border-width: 1px 1px 1px 0px;
  border-style: solid;
  border-color: var(--theme-color);
  border-radius: 0px 3px 3px 0px;
  z-index: 999;
  cursor: pointer;

  svg {
    width: 14px;
    height: 14px;
    fill: var(--font-1);
  }
}

.plan-task-config-hideing {
  width: 20px;
  height: 94px;
  background-color: var(--theme-10);
  border-width: 1px 0px 1px 1px;
  border-style: solid;
  border-color: var(--theme-color);
  border-radius: 3px 0px 0px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--font-1);
  line-height: 16px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;

  p {
    text-align: center;
  }

  svg {
    width: 14px;
    height: 14px;
    fill: var(--font-1);
    margin-top: 4px;
  }
}

.plan-task-config-body {
  position: relative;
  max-height: 100%;
  overflow: scroll;
  background: var(--module);
  height: 100%;
  padding: 16px 0 16px 22px;
}

.task-config {
  min-width: 354px;
  width: 354px;
  // height: 533px;
  height: 100%;

  color: var(--font-1) !important;
  background: var(--module);
  border-radius: 0px 5px 5px 0px;
  position: relative;

  .senior-config {
    .arco-collapse {
      border: none;
      
      .arco-collapse-item-content {
        background-color: transparent;
      }

      .arco-collapse-item-header {
        background-color: var(--bg);
        border: none;
      }
    }
    .arco-collapse-item-content-box {
      padding: 0;
    }
    .custom-distributed {
      .config {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 22px;
        box-sizing: border-box;
        font-size: 12px;

        .arco-switch {
          margin-left: 8px;
        }

        .explain-icon {
          margin-left: 10px;
          cursor: pointer;
        }

        .arco-radio-group {
          margin-left: 22px;

          .arco-radio {
            font-size: 12px;
          }
        }
      }

      .full-screen-icon-box {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-bottom: 2px;

        svg {
          color: var(--font-1);
          cursor: pointer;
        }
      }

      .arco-table-th {
        background-color: transparent;
        color: var(--font-3);
        font-size: 12px;

        .arco-table-th-item {
          padding: 3.58px 16px;
        }
      }

      .arco-table-td {
        background-color: transparent;
        color: var(--font-3);
        font-size: 12px;
        padding: 3.08px 16px;
      }
    }
  }

  .arco-select {
    background-color: var(--bg);
  }

  .arco-select:hover {
    background-color: var(--select-hover);
  }

  .arco-select-view {
    background-color: var(--bg);
  }

  .config-set-select-item {
    display: flex;
    width: 100%;
    margin-bottom: 8px;
    .arco-select {
      min-width: 84px;
      width: 84px;

      .arco-select-view-value {
        font-size: 12px;
      }

      .arco-select-view {
        padding-left: 8px;
        padding-right: 8px;
      }
    }

    .arco-select-option {
      font-size: 12px;
      padding: 0 9px;
    }

    .arco-input {
      margin-left: 12px;
      background-color: var(--bg);
    }

    .arco-input:hover {
      background-color: var(--bg) !important;
    }
  }

  &-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(87, 87, 87, .5);
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    .text {
      background-color: var(--bg-5);
      border-radius: 5px;
      padding: 8px 32px;
      color: var(--font-1);
    }
  }


  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;

    p {
      font-size: 16px;
      font-weight: 600;
    }

    .btn {
      display: flex;
      align-items: center;

      .save {
        width: 60px;
        height: 25px;
        background: var(--theme-color);
        border-radius: 3px;
        padding: 8px;
        color: #fff;
        margin-right: 16px;

        svg {
          fill: #fff;
          margin-right: 6px;
        }
      }

      .pre-btn {
        background-color: var(--border-line);
        border-radius: 3px;
        color: var(--font-1);
      }
    }
  }

  &-container {
    display: flex;
    flex-direction: column;

    .select-date {
      display: flex;
      flex-direction: column;

      .label {
        font-size: 14px;
        font-weight: 600;
      }

      &-detail {
        display: flex;
        margin-top: 6px;
        margin-bottom: 10px;
      }

      .arco-picker {
        background-color: var(--bg);
        cursor: pointer;
        input {
          font-size: 12px !important;
        }
      }

      .time-explain {
        line-height: 14px;
        margin-bottom: 20px;
      }
    }

    .item {
      display: flex;
      align-items: center;

      p {
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        min-width: 70px;
      }


      .explain {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        &-left {
          display: flex;
          align-items: center;

          p {
            margin-right: 6px;
          }

          svg {
            cursor: pointer;
          }
        }

        &-right {
          background-color: var(--bg-1);
          width: 146px;
          height: 32px;
          border: 1px solid var(--bg-4);
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 6px;
          padding-right: 0;
          box-sizing: border-box;
          margin-right: 20px;

          .time-item {
            display: flex;
            flex-direction: column !important;
          }

          .arco-select {
            height: 30px;
            background-color: var(--bg-1);
            border-color: transparent;

            .arco-select-view {
              background-color: var(--bg-1);
            }

            .arco-select-view-value {
              font-size: 14px;
              padding-left: 20px;
            }

            .arco-select-view-suffix {
              svg {
                width: 8px;
                height: 8px;
                min-width: 8px;
                fill: var(--font-1);
              }
            }
          }
        }
      }

      .time-explain {
        white-space: normal !important;
        margin-top: 20px;
        font-size: 10px;
        color: var(--font-1);
      }
    }

    .time-select {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
    }

    .apipost-table {
      margin-top: 32px;
    }

    .other-config {
      box-sizing: border-box;
      padding: 10px 0;
      // border: 1px solid var(--bg-4);
      // border-radius: 5px;
      display: flex;
      flex-direction: column;
      // height: 94px;
      align-items: baseline;

      .mode-config-title {
        font-size: 14px;
        font-weight: 600;
      }

      &-item {
        margin-top: 15px;

        .apipost-radio-group {
          display: flex;
          flex-wrap: wrap;

          .apipost-radio-wrapper {
            width: 45%;

            .apipost-radio-children {
              display: flex;
              align-items: center;

              .label {
                white-space: nowrap;
              }

              .apipost-input-inner-wrapper {
                margin-left: 10px;
                width: 40%;
                margin-right: 5px;
              }
            }
          }
        }

        .other-config-detail {
          display: flex;
          flex-direction: column;

          .config-detail-item {
            display: flex;
            align-items: center;
            margin-top: 15px;

            span {
              white-space: nowrap;
              width: 130px;
            }

            .apipost-input-inner-wrapper {
              width: 180px;
              margin-left: 20px;
              margin-right: 5px;
            }
          }
        }

      }
    }

    .apipost-table-th {
      background-color: var(--bg-3);
    }

    .apipost-table-td {
      color: var(--font-1);
      height: 30px;
    }

    .apipost-radio-group,
    .apipost-switch {
      margin-left: 4px;
    }

    .apipost-radio-wrapper {
      // margin-top: 18px;
    }
  }
}


.task-config-detail {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;

  .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    // height: 229px;

    &-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      // height: 220px;
      // padding-top: 16px;

      p {
        margin-bottom: 32px;
        cursor: pointer;
        height: 12px;
        margin-right: auto;
      }

      .select {
        color: var(--theme-color);
      }
    }
  }

  .right {
    position: relative;
    // height: 229px;
    width: 100%;

    .radio-group {
      display: flex;
      margin-bottom: 12px;
      width: 100%;

      &-item {
        display: flex;
        align-items: center;
        width: 100%;

        .apipost-radio-children {
          display: flex;
          align-items: center;
        }

        span {
          white-space: nowrap;
        }

        .apipost-input-inner-wrapper {
          width: 60px;
          height: 29px;
          margin-left: 2px;
        }

        .arco-input {
          background-color: var(--bg);
        }

        .arco-input:hover {
          background-color: var(--bg) !important;
        }

        .apipost-radio-children {
          padding-right: 0 !important;
        }
      }
    }

    // .delta {
    //     position: absolute;
    //     width: 0;
    //     height: 0;
    //     border: 20px solid;
    //     border-color: transparent #f00 transparent transparent;
    //     // border-right: #f00;
    //     top: 0;
    //     z-index: 999;
    // }

    &-container,
    &-container-first {
      width: 100%;
      // min-height: 229px;
      background-color: var(--task-config-bg) !important;
      border: 1px solid var(--border-line);
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      // align-items: center;
      box-sizing: border-box;
      border-radius: 6px;

      .right-item {
        display: flex;
        margin-bottom: 16px;
        align-items: center;

        width: 100%;

        .reheat-explain {
          display: flex;
          width: 100px;

          span {
            width: auto;
          }
        }

        span {
          min-width: 100px;
          white-space: nowrap;
        }

        .apipost-input-inner-wrapper {
          width: 130px;
          height: 29px;
          margin-left: 10px;
          background-color: var(--bg-1);
          font-size: 12px;
        }

        .arco-input {
          background-color: var(--bg);
        }

        .arco-input:hover {
          background-color: var(--bg) !important;
        }
      }
    }

    &-container {
      padding: 12px 15px 12px 10px;
    }

    &-container-first {
      min-height: 130px !important;
      align-items: flex-start;
      padding: 10px 12px;
      width: 100%;

      .apipost-input-inner-wrapper {
        font-size: 12px;
        background-color: var(--bg-1);
      }

      .right-item {
        margin-left: 6px;

        span {
          width: 100px;
        }

        .apipost-input-inner-wrapper {
          width: 130px;
          height: 29px;
          margin-left: 8px !important;
          background-color: var(--bg-1);
          font-size: 12px;
        }
      }
    }
  }
}

.apipost-radio-wrapper {
  color: var(--font-1) !important;
}

.must-input {
  color: #f00;
}